<template>
  <div class="department">
    
    <div class="clearfix">
      <div class="fl">
        <Checkbox label="1"></Checkbox> 浙江云创教育科技有限公司
        <Icon type="ios-create c5" size="24"  @click="deleteConfirm"/>编辑部门
        <Icon type="ios-trash c7" size="24"  @click="deleteConfirm"/> 删除部门
      </div>
      <div class="fr">
        <Button type="warning" @click="modal1=true">
          <Icon type="md-add" ></Icon> 新建部门
        </Button>
      </div>
    </div>
    
    <div class="mt10">
      <Row>
        <Col span="6">
          <CheckboxGroup v-model="single">
          <ul class="departs">
            <li class="active">
                <Checkbox :label="0">&nbsp;</Checkbox>
                <div class="text">
                  总经办（3）
                </div>
            </li>
            <li>
                <Checkbox :label="1">&nbsp;</Checkbox>
                <div class="text">
                  研发部（8）
                </div>
            </li>
            <li>
                <Checkbox :label="2">&nbsp;</Checkbox>
                <div class="text">
                  运营部（28）
                </div>
            </li>
            <li>
                <Checkbox :label="3">&nbsp;</Checkbox>
                <div class="text">
                  运营部（28）
                </div>
            </li>
            <li>
                <Checkbox :label="4">&nbsp;</Checkbox>
                <div class="text">
                  运营部（28）
                </div>
            </li>
          </ul>
          </CheckboxGroup>
        </Col>
        <Col span="18">
          <Table stripe :columns="columns1" :data="data1">
            
          </Table>
        </Col>
      </Row>
    </div>
    
    <!-- dialog -->
    <Modal v-model="modal1" width="400" title="新建部门">
      <div class="">
         部门名称：
         <Input type="text" style="width:200px;"></Input>
      </div>
      <div class="mt20">
        上级部门：
        <Select v-model="select1" style="width:200px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div slot="footer" class="text-center">
        <Button type="primary" size="large" @click="modal1=false">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        modal1: false,
        single:[],
        position:[
          {title: '我的团队', link:'/admin/myTeam'},
          {title: '部门管理'}
        ],
        columns1: [
          {title: 'ID', key: 'id'},
          {title: '姓名', key: 'address'},
          { title: '手机', key: 'address'},
          
         ],
         data1:[
           {
             id: '103232',
             'address': '辅导费'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           },
           {
             id: '103232',
             'address': 'fsdfsdfdsf'
           }
         ],
         cityList: [{
             value: '1',
             label: '全部'
           }]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    }
  }
</script>

<style lang="less" scoped>
  .departs{
    line-height: 44px;
    li {
      overflow: hidden;
      
      .text{
        display: inline-block;
        background: #f4f5f6;
        width: 200px;
        text-align: center;
      }
      &.active{
        .text{
          background: #1f80e2;
          color: #fff;
        }
      }
    }
  }
</style>
